<template>
  <view class="sk-container">
    <scroll-view class="content" data-event-opts="scroll,viewScroll,$event" scroll-y="true" enable-back-to-top="true">
      <view class="head-box" style="height: 91px;padding-top: 51px;background-color: rgba(17, 182, 110, 0);">
        <view class="head" style="height: 32px;">
          <view class="last-page" data-event-opts="tap,lastPage,$event">
            <view>
              <text class="uni-icons icons--uni-icons uniui-left icons--uniui-left sk-pseudo sk-pseudo-circle" data-event-opts="tap,_onClick,$event" style="color:#fff;font-size:28px;"></text>
            </view>
          </view>
          <view class="head-title sk-transparent sk-text-14-2857-474 sk-text" style="opacity: 0;">今日热门话题</view>
        </view>
      </view>
      <image class="bj sk-image"></image>
      <view class="top-box" style="padding-top: 91px;">
        <view class="topic-box">
          <view class="box">
            <view class="topic-top">
              <view class="image">
                <image mode="aspectFill" class="sk-image"></image>
              </view>
              <view class="topic-info">
                <view class="title sk-transparent sk-text-14-2857-585 sk-text">今日热门话题</view>
                <view class="userCount sk-transparent sk-text-14-2857-123 sk-text">3参与</view>
              </view>
            </view>
            <view class="source">
              <text class="sk-transparent sk-text-14-2857-599 sk-text">养生经验</text>
            </view>
            <view class="desc sk-transparent sk-text-14-2857-357 sk-text">简介：简介</view>
          </view>
          <view class="content-box">
            <view class="role-box">
              <view class="role-top sk-transparent sk-text-12-0000-838 sk-text" style="background-position-x: 50%;">奖励通知</view>
              <text class="sk-transparent sk-text-14-2857-256 sk-text">关注话题并参与评论有奖励惊喜等着你呦！如果点赞可进入排行榜更多惊喜等候你！</text>
            </view>
            <view class="text-box" >
              <view class="comment-text">
                <rich-text ></rich-text>
              </view>
              <view class="images">
                <view class="image-item" data-event-opts="tap,showImages,0,$0,info.picList">
                  <image class="image sk-image" mode="aspectFill"></image>
                </view>
              </view>
            </view>
            <view class="buttons">
              <view class="button-item" data-event-opts="tap,setTopicLike,$event,$0,$1,info.id,info.praised">
                <image mode="aspectFill" class="sk-image"></image>
                <text class="sk-transparent sk-text-14-2857-374 sk-text">2支持</text>
              </view>
              <view class="button-item" data-event-opts="tap,toMessage,$event">
                <image mode="aspectFill" class="sk-image"></image>
                <text class="sk-transparent sk-text-14-2857-766 sk-text">9评论</text>
              </view>
              <button class="button-item sk-button" open-type="share">
                <image mode="aspectFill" class="sk-image"></image>
                <text class="sk-transparent sk-text-30-4348-670 sk-text" style="background-position-x: 50%;">分享4</text>
              </button>
            </view>
          </view>
        </view>
        <view class="comment-box">
          <view class="comment-top">
            <view class="title">
              <view class="text1 sk-transparent sk-text-14-2857-445 sk-text">评论</view>
              <view class="icon sk-image"></view>
            </view>
            <view class="screen">
              <view class="screen-item screen-item-hover sk-transparent sk-text-27-2727-751 sk-text" data-event-opts="tap,setScreen,0">最热</view>
              <view class="screen-item sk-transparent sk-text-27-2727-847 sk-text" data-event-opts="tap,setScreen,1">最新</view>
              <view class="screen-item sk-transparent sk-text-27-2727-672 sk-text" data-event-opts="tap,setScreen,2">同门店</view>
            </view>
          </view>
          <view data-event-opts="^showImages,showImages">
            <view class="components-item commentItem--components-item data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
              <view class="userImage commentItem--userImage data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                <image class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-image" mode="aspectFill"></image>
                <view class="icon commentItem--icon data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                  <image class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-image" mode="aspectFit"></image>
                </view>
              </view>
              <view class="content commentItem--content data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                <view class="user-info commentItem--user-info data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                  <view class="user-name-box commentItem--user-name-box data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                    <view class="username commentItem--username data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-transparent sk-text-14-2857-283 sk-text">齐宇轩</view>
                  </view>
                  <view class="huizhang commentItem--huizhang data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                    <view class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                      <view>
                        <view class="daren daren--daren">
                          <view class="icon daren--icon">
                            <image mode="heightFix" style="width: 23.4px;" class="sk-image"></image>
                          </view>
                          <view class="text-box daren--text-box sk-image">
                            <view class="text daren--text">
                              <image mode="aspectFit" class="sk-image"></image>
                            </view>
                            <view class="dengji daren--dengji sk-transparent sk-opacity">V2</view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view  class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                      <view>
                        <view class="daren daren--daren">
                          <view class="icon daren--icon">
                            <image mode="heightFix" style="width: 24.7379px;" class="sk-image"></image>
                          </view>
                          <view class="text-box daren--text-box text-box1 daren--text-box1 sk-image">
                            <view class="text daren--text">
                              <image mode="aspectFit" class="sk-image"></image>
                            </view>
                            <view class="dengji daren--dengji sk-transparent sk-opacity" style="color:#fff;">V1</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="comment commentItem--comment data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                  <view class="text commentItem--text data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                    <rich-text nodes="        "></rich-text>
                  </view>
                  <view class="images commentItem--images data-v-1d6e2cfc commentItem--data-v-1d6e2cfc"></view>
                  <view class="date-set commentItem--date-set data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                    <view class="date commentItem--date data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-transparent sk-text-14-2857-473 sk-text">2023-08-30 09:37:49</view>
                    <view class="like commentItem--like data-v-1d6e2cfc commentItem--data-v-1d6e2cfc" data-event-opts="tap,commentLike,$event" id="a123ecae--like-0">
                      <view class="icon commentItem--icon data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                        <image class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-image" mode="aspectFill"></image>
                      </view>
                      <text class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-transparent sk-text-14-2857-254 sk-text">0点赞</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc vue-ref commentItem--vue-ref" data-ref="toMessage"></view>
            </view>
          </view>
          <view data-event-opts="^showImages,showImages">
            <view class="components-item commentItem--components-item data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
              <view class="userImage commentItem--userImage data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                <image class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-image" mode="aspectFill"></image>
              </view>
              <view class="content commentItem--content data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                <view class="user-info commentItem--user-info data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                  <view class="user-name-box commentItem--user-name-box data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                    <view class="username commentItem--username data-v-1d6e2cfc commentItem--data-v-1d6e2cfc sk-transparent sk-text-14-2857-649 sk-text">叶美</view>
                  </view>
                  <view class="huizhang commentItem--huizhang data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                    <view class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                      <view>
                        <view class="daren daren--daren">
                          <view class="icon daren--icon">
                            <image mode="heightFix" style="width: 23.4px;" class="sk-image"></image>
                          </view>
                          <view class="text-box daren--text-box sk-image">
                            <view class="text daren--text">
                              <image mode="aspectFit" class="sk-image"></image>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc">
                      <view>
                        <view class="daren daren--daren">
                          <view class="icon daren--icon">
                            <image mode="heightFix" class="sk-image"></image>
                          </view>
                          <view class="text-box daren--text-box text-box-n daren--text-box-n sk-image">
                            <view class="text daren--text">
                              <image mode="aspectFit" class="sk-image"></image>
                            </view>
                            <view class="dengji daren--dengji sk-transparent sk-opacity" style="color:#fff;">V0</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view  class="data-v-1d6e2cfc commentItem--data-v-1d6e2cfc vue-ref commentItem--vue-ref" data-ref="toMessage"></view>
            </view>
          </view>
        </view>
      </view>
      <view class="to-comment" data-event-opts="tap,toMessage,$event">
        <image mode="aspectFit" class="sk-image"></image>
      </view>
      <view  class="vue-ref" data-ref="toMessage"></view>
      <view  class="vue-ref" data-event-opts="^clickId,clickId" data-ref="operation"></view>
      <view  class="vue-ref" data-ref="preview"></view>
    </scroll-view>
  </view>
</template>
<style>
/*
此文件为开发者工具生成，生成时间: 2023/8/30下午2:57:07

在 /Users/wangweidong/Desktop/renruikeji/chicken-game/unpackage/dist/dev/mp-weixin/pages/circle/details/details.wxss 中引入样式
```
@import "./details.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-474 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 44.1589rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-585 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 56.4252rpx;
  position: relative !important;
}
.sk-text-14-2857-123 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.7991rpx;
  position: relative !important;
}
.sk-text-14-2857-599 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 36.7991rpx;
  position: relative !important;
}
.sk-text-14-2857-357 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 51.5187rpx;
  position: relative !important;
}
.sk-text-12-0000-838 {
  background-image: linear-gradient(transparent 12.0000%, #EEEEEE 0%, #EEEEEE 88.0000%, transparent 0%) !important;
  background-size: 100% 43.8084rpx;
  position: absolute !important;
}
.sk-text-14-2857-256 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 46.6121rpx;
  position: relative !important;
}
.sk-text-14-2857-374 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 34.3458rpx;
  position: relative !important;
}
.sk-text-14-2857-766 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 34.3458rpx;
  position: relative !important;
}
.sk-text-30-4348-670 {
  background-image: linear-gradient(transparent 30.4348%, #EEEEEE 0%, #EEEEEE 69.5652%, transparent 0%) !important;
  background-size: 100% 62.6947rpx;
  position: relative !important;
}
.sk-text-14-2857-445 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 56.4252rpx;
  position: absolute !important;
}
.sk-text-27-2727-751 {
  background-image: linear-gradient(transparent 27.2727%, #EEEEEE 0%, #EEEEEE 72.7273%, transparent 0%) !important;
  background-size: 100% 57.8271rpx;
  position: relative !important;
}
.sk-text-27-2727-847 {
  background-image: linear-gradient(transparent 27.2727%, #EEEEEE 0%, #EEEEEE 72.7273%, transparent 0%) !important;
  background-size: 100% 57.8271rpx;
  position: relative !important;
}
.sk-text-27-2727-672 {
  background-image: linear-gradient(transparent 27.2727%, #EEEEEE 0%, #EEEEEE 72.7273%, transparent 0%) !important;
  background-size: 100% 57.8271rpx;
  position: relative !important;
}
.sk-text-14-2857-283 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 44.1589rpx;
  position: relative !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-14-2857-473 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 34.3458rpx;
  position: relative !important;
}
.sk-text-14-2857-254 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 34.3458rpx;
  position: relative !important;
}
.sk-text-14-2857-649 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 44.1589rpx;
  position: relative !important;
}
.sk-button {
  color: #EFEFEF !important;
  background: #EFEFEF !important;
  border: none !important;
  box-shadow: none !important;
}
.sk-image {
  background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
  background: #EFEFEF !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}


</style>
